screenshot-ui: Add close button

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1954>

diff --git a/data/theme/gnome-shell-sass/widgets/_screenshot.scss b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
index d28aacb0e26e58aa550a0956e800f046b33663f0..aa1a11a8c8cd5f0640ab0a48e8b1f4e321d7a27f 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_screenshot.scss
+++ b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
@@ -7,3 +7,19 @@
   margin-bottom: $base_margin * 8;
   spacing: $base_padding * 2;
 }
+
+.screenshot-ui-close-button {
+  background-color: $osd_bg_color;
+  border-radius: 99px;
+  width: 64px;
+  height: 64px;
+  margin: 64px;
+
+  &:hover, &:focus { background-color: $hover_bg_color; }
+  &:active { background-color: $active_bg_color; }
+  &:checked { background-color: darken($osd_bg_color, 5%); }
+
+  StIcon {
+    icon-size: $base_icon_size * 2;
+  }
+}

diff --git a/js/ui/screenshot.js b/js/ui/screenshot.js
index 6850e66cc5a5b88fbd269e6ce377ebaedbc406ac..548df498ee9cac1841cd14cf5501662753063ae1 100644 (file)
--- a/js/ui/screenshot.js
+++ b/js/ui/screenshot.js
@@ -53,6 +53,17 @@ class ScreenshotUI extends St.Widget {
         });
         this._primaryMonitorBin.add_child(this._panel);
 
+        this._closeButton = new St.Button({
+            style_class: 'screenshot-ui-close-button',
+            x_align: Clutter.ActorAlign.END,
+            y_align: Clutter.ActorAlign.START,
+            x_expand: true,
+            y_expand: true,
+        });
+        this._closeButton.set_child(new St.Icon({ icon_name: 'window-close-symbolic' }));
+        this._closeButton.connect('clicked', () => this.close());
+        this._primaryMonitorBin.add_child(this._closeButton);
+
         Main.layoutManager.connect('monitors-changed', () => {
             // Nope, not dealing with monitor changes.
             this.close(true);